import React, { Component } from 'react'
import { Layout, Button, Form, Input, Image, Row, Col } from 'antd';
import PubSub from 'pubsub-js'
const { Header, Footer, Sider, Content } = Layout;
/*
    功能：主页面的左侧，显示本地视频，本地信息，输入框
*/
const constraints = window.constraints = {
    audio: false,
    video: true
};
let videoTracks = {};
export default class P2PLocalInfo extends Component {
    componentDidMount() {
        this.openCarema()
    }
    openCarema = async (e) => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            console.log('handle Success');
            this.handleSuccess(stream);
        } catch (e) {
            this.handleError(e);
        }
    }
    handleSuccess = (stream) => {
        const video = this.refs['localVideo'];
        videoTracks = stream.getVideoTracks();
        window.stream = stream;
        video.srcObject = stream;
    }
    handleError = (error) => {
        console.log('getUserMedia error:', error)
    }
    render() {
        return (
            <Sider style={{
                padding: 0,
                margin: 0,
                minHeight: 700,
                backgroundColor: 'yellow'
            }}>
                <Row gutter={{ xs: 12, sm: 12, md: 12, lg: 12 }} >
                    <Col style={{
                        width: 100,
                        height: 20,
                        margin: 10,
                        top: 50,
                        left: 50,
                        align:'center'
                    }}>
                        <h3 align="center">你的头像</h3>
                    </Col>
                    <Col style={{
                        width: 100,
                        height: 100,
                        margin: 10,
                        top: 50,
                        left: 50,
                    }}>
                        <Image
                            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                        ></Image>
                    </Col>
                    <Col>
                        <video ref="localVideo" style={{ width: 200, height: 400 }} autoPlay playsInline></video>
                    </Col>
                </Row>
            </Sider>
        )
    }
}
